<template>
   <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>

    </el-breadcrumb>
    <!--卡片视图区-->
    <el-card class="box-card">
      <!--搜索与添加区域-->

     <el-row :gutter="20">
       <el-col :span="7">
         <el-input placeholder="请输入内容" >
             <el-button slot="append" icon="el-icon-search"></el-button>
         </el-input>
       </el-col>
       <el-col :span="4">
         <el-button type="primary">添加用户</el-button>
       </el-col>
     </el-row>
     <!--用户列表区域-->
    <el-table :data="userList" border stripe>
      <el-table-column type="index" label="#">
      </el-table-column>
       <el-table-column label="用户姓名" prop="username">
       </el-table-column>
       <el-table-column label="用户密码" prop="password">
       </el-table-column>
       <el-table-column label="电话号码" prop="phone">
       </el-table-column>
       <el-table-column label="邮箱地址" prop="email">
       </el-table-column>
       <el-table-column label="用户状态" prop="status">
         <!--作用域插槽-->
         <!-- <template slot-scope="scope">
           {{scope.row}}
         </template> -->
       <template slot-scope="scope">
          <el-switch v-model="scope.row.status" @change="userStateChage(scope.row)"></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="用户操作" width="190px">
         <template slot-scope="scope">
           <!--修改按钮-->
           <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
           <!--删除按钮-->
           <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>

            <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                 <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
    <!--分页区域 current-page 可以通过参数列表来获取-->
      <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="queryInfo.pageNum"
           :page-sizes="[5, 10, 20, 30]"
           :page-size="queryInfo.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
         </el-pagination>
    </el-card>
   </div>
</template>

<script>
  export default{
    created(){
     this.selectAllUsers()
    },
    data(){
      return{
        //获取用户列表的参数对象
          queryInfo:{
            query:'',
            pageNum:1,
            pageSize:2
          },
          userList:[],
          total:0
        }
      },

    methods:{
      async selectAllUsers(){
       // const {data:res}= await this.$http.
        //get("http://localhost:8092/user/selectAllUsers")
       const{data:res}=await this.$http. get("http://localhost:8092/user/selectAllUsersByLimit", {params:this.queryInfo})
        //console.log(res)
        this.userList=res.data.rows
        this.total=res.data.total


      },
      //监听每一页数据改变的事件
       handleSizeChange(newSize){
         this.queryInfo.pageSize=newSize
         this.selectAllUsers()

       },
       //监听改变页码值，改变的事件
       handleCurrentChange(newPage){
         this.queryInfo.pageNum=newPage
         //重新查询数据
         this.selectAllUsers()

      },
    }
  }
</script>

<style>
</style>
